<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles/theme-pui.css">
  <!-- <script src="./modules/preact/dist/preact.min.umd.js"></script>
    <script src="./modules/preact/hooks/dist/hooks.umd.js"></script> -->
</head>
<style>
  .menu {
    list-style: none;
    padding: 0;
  }

  .submenu {
    margin-bottom: 10px;
  }

  button {
    background-color: #f2f2f2;
    border: none;
    padding: 10px;
    margin: 5px 0;
    cursor: pointer;
  }

  button.active {
    background-color: #e0e0e0;
  }

  .tip {
    margin-left: 5px;
    color: #888;
  }

  .submenu ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .submenu.open ul {
    max-height: 200px;
    /* 根据实际需求设置合适的高度 */
  }
</style>
<script type="module">
  import { h, render, Component, Fragment } from "./lib/preact";
  import ClockX from './components/Test.js'
  import { Button, Menu } from './components/pui/index.js'
  import { Router, route, Link, Route, getCurrentUrl, Info } from './lib/preact-router.es.js';
  //const { h, render, Component } = preact;
  //const { useState, useEffect, useCallback } = preactHooks;
  JSX = h;
  const styles = {
    color: 'red',
    fontSize: '20px',
    // 其他样式属性...
  };


  class App extends Component {
    state = { time: Date.now() };

    // Called whenever our component is created
    componentDidMount() {
      // update time every second
      this.timer = setInterval(() => {
        this.setState({ time: Date.now() });
      }, 1000);
    }

    // Called just before our component will be destroyed
    componentWillUnmount() {
      // stop when not renderable
      clearInterval(this.timer);
    }

    render() {
      let time = new Date(this.state.time).toLocaleTimeString();
      const handleClick = (a) => {
        console.log(a)
      }
      // 定义页面组件
      const handleOnChange = (e) => {
        console.log('change url', e.url)
      }
      window.onhashchange = (e) => {
        console.log('oldURL:', e.oldURL)
        console.log('newURL:', e.newURL)
      }
      document.post(new Event("hashchange", ()=>{console.log('hash chenage')}))
     window.addEventListener("hashchange", ()=>{console.log('hash chenage')});
      //   useEffect(() => {
      //     //初始化路由
      //     console.log('default router init')
      //     route('/')
      //     console.log('getCurrentHashPath',Info.getCurrentHashPath)
      //     //window.addEventListener("hashchange", ()=>{console.log('hash chenage')});
      //     document.post(new Event("hashchange", ()=>{console.log('hash chenage')}))
      //     window.addEventListener("hashchange", ()=>{console.log('hash chenage')});
      //     return function cleanup() {

      //     };
      //     //return () => {}
      // }, []);
      const Home = () => <h1>Home</h1>;
      const About = () => <h1>About</h1>;
      const Contact = () => <h1>Contact</h1>;

      // 定义路由配置
      const routes = [
        {
          path: '/',
          component: Home,
        },
        {
          path: '/about',
          component: About,
        },
        {
          path: '/contact',
          component: Contact,
        },
      ];
      return <Fragment>
        <div><span>{time}</span>
          <p><ClockX></ClockX></p>
          <Menu initialOpenIndexes={[2]}></Menu>
          <p>
            <Link route='/' activeClassName="active" >home</Link>
            ||<Link route='/about' activeClassName="active" >about</Link>
            ||<Link route='/contact' activeClassName="active" >contact</Link>

            <Router className='fade' onChange={handleOnChange}>

              <Home path="/" />
              <About path="/about" name="cooll sciter welcome!"></About>
              <Contact path="/contact" ></Contact>
            </Router>
          </p>
          <div class="row">
            <div class="col col-0">0</div>
            <div class="col col-4">4</div>
            <div class="col col-4">4</div>
            <div class="col col-4">4</div>
            <div class="col col-4">4</div>
            <div class="col col-8">8</div>
            <div class="col col-8">8</div>
          </div>
          <div class="v-row">
            <div class="col col-0">0</div>
            <div class="col col-4">4</div>
            <div class="col col-4">4</div>
            <div class="col col-4">4</div>
            <div class="col col-4">4</div>
            <div class="col col-8">8</div>
            <div class="col col-8">8</div>
          </div>

          <Button leftIcon="fa-star fas fa-6x " rightIcon="fa-star" >测试按钮</Button>
          <Button theme="primary"  >主要按钮</Button>
          <Button theme="success"  >success按钮</Button>
        </div>
      </Fragment>
    }
  }

  render(<App />, document.getElementById("app"));
</script>

<body>
  <div id="app"></div>
  <h3 class="pui-subname c-gray ffm">3.6 按钮</h3>
  <button class="btn bs btn-primary">小按钮</button>
  <button class="btn bs btn-common">小按钮</button>
  <button href="javascript:;" class="btn btn-primary"><span>普通按钮</span></button>
  <a href="javascript:;" class="btn btn-primary"><span>a普通按钮</span></a>
  <button href="javascript:;" class="btn btn-secondary">
    <i class="icon icon-addr"></i><span>图标按钮</span>
  </button>
  <a href="javascript:;" class="btn btn-secondary">
    <i class="icon icon-addr"></i><span>a图标按钮</span>
  </a>
  <input class="btn btn-red" type="button" value="Input按钮" />
  <button class="btn btn-common">无背景按钮</button>
  <button class="btn bb btn-red"><i class="icon icon-addr"></i>大按钮</button>
  <button class="btn bb btn-common">大按钮</button>
  <div class="pd10">
    <div class="btn-group clearfix"> <button>左</button><button>中</button><button>右</button> </div>
  </div>
  <div class="pd10">
    <div class="btn-group clearfix"> <button class="btn btn-blue">左</button><button
        class="btn btn-blue">中</button><button class="btn btn-blue">中</button><button
        class="btn btn-blue">中</button><button class="btn btn-blue">中</button><button class="btn btn-blue">右</button>
    </div>
  </div>
  <table class="table table-bordered table-striped table-vcenter">
    <thead>
      <tr>
        <th class="w-15">按钮</th>
        <th>class=""</th>
        <th class="w-15">按钮</th>
        <th>class=""</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><button class="btn btn-default btn-w-md" type="button">默认按钮</button></td>
        <td><code>btn btn-default</code></td>
        <td><button class="btn btn-primary btn-w-md" type="button">主要颜色按钮</button></td>
        <td><code>btn btn-primary</code></td>
      </tr>
      <tr>
        <td><button class="btn btn-success btn-w-md" type="button">绿色按钮</button></td>
        <td><code>btn btn-success</code></td>
        <td><button class="btn btn-info btn-w-md" type="button">一般信息按钮</button></td>
        <td><code>btn btn-info</code></td>
      </tr>
      <tr>
        <td><button class="btn btn-warning btn-w-md" type="button">橙色按钮</button></td>
        <td><code>btn btn-warning</code></td>
        <td><button class="btn btn-danger btn-w-md" type="button">红色按钮</button></td>
        <td><code>btn btn-danger</code></td>
      </tr>
      <tr>
        <td><button class="btn btn-secondary btn-w-md" type="button">次要颜色按钮</button></td>
        <td><code>btn btn-secondary</code></td>
        <td><button class="btn btn-dark btn-w-md" type="button">黑色按钮</button></td>
        <td><code>btn btn-dark</code></td>
      </tr>
      <tr>
        <td><button class="btn btn-purple btn-w-md" type="button">紫色按钮</button></td>
        <td><code>btn btn-purple</code></td>
        <td><button class="btn btn-pink btn-w-md" type="button">粉红色按钮</button></td>
        <td><code>btn btn-pink</code></td>
      </tr>
      <tr>
        <td><button class="btn btn-cyan btn-w-md" type="button">青色按钮</button></td>
        <td><code>btn btn-cyan</code></td>
        <td><button class="btn btn-yellow btn-w-md" type="button">黄色按钮</button></td>
        <td><code>btn btn-yellow</code></td>
      </tr>
      <tr>
        <td><button class="btn btn-brown btn-w-md" type="button">棕色按钮</button></td>
        <td><code>btn btn-brown</code></td>
        <td><button class="btn btn-link" type="button">链接形式</button></td>
        <td><code>btn btn-link</code></td>
      </tr>
    </tbody>
  </table>
</body>

</html>